<template>
  <div class="common-layout">
    <el-container>
      <el-header height="40">机器列表（{{store.state.node}}）</el-header>
      <el-main>
        <el-menu
          :default-active="active"
          @select="change"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
        <el-menu-item index="1">PC1 Worker</el-menu-item>
        <el-menu-item index="2">C2 Worker</el-menu-item>
        </el-menu>
        <el-table :data="data.pre" max-height="760" style="width: 100%" v-if="active == '1'">
          <el-table-column label="Status" width="80">
            <template #default="scope">
              <el-icon><monitor :color="worker_color(scope.row)"/></el-icon>
            </template>
          </el-table-column>
          <el-table-column label="ID" width="120">
            <template #default="scope">
              <div>{{short_id(scope.row.id)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="host" label="Host" width="140" />
          <el-table-column prop="enable" label="Enable" width="120" />
          <el-table-column label="AP" width="80">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.add_piece.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.add_piece.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.add_piece.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="PC1" width="80">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.pre_one.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.pre_one.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.pre_one.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="PC2" width="80">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.pre_two.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.pre_two.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.pre_two.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="C1" width="80">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.commit.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.commit.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.commit.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="FIN" width="100">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.finalize.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.finalize.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.finalize.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="GET" width="100">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.fetch.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.fetch.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.fetch.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="data.commit" max-width="700px" style="width: 100%"  v-if="active == '2'">
          <el-table-column label="Status" width="80">
            <template #default="scope">
              <el-icon><monitor :color="worker_color(scope.row)"/></el-icon>
            </template>
          </el-table-column>
          <el-table-column label="ID" width="120">
            <template #default="scope">
              <div>{{short_id(scope.row.id)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="host" label="Host" width="140" />
          <el-table-column prop="enable" label="Enable" width="120" />
          <el-table-column label="C2" width="80">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.commit.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.commit.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.commit.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="FIN" width="100">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.finalize.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.finalize.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.finalize.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="GET" width="100">
            <template #default="scope">
              <el-row :gutter="2">
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.fetch.miner.running}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.fetch.miner.assigned}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{scope.row.fetch.limit}}</div></el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {Monitor} from '@element-plus/icons-vue'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router'
import { ref, reactive, watchEffect } from 'vue'
import axios from 'axios'

let router = useRouter()
let store = useStore()
const data = reactive({pre: [], commit: []})
const active = ref('1')

watchEffect(() => {
  console.log('node name', store.state.node)
  if ('' == store.state.node) {
    router.push('/')
    return
  }
  let url = store.state.server + '/jobs/' + store.state.node
  axios.get(url).then(response => {
    console.log(response.data)
    data.pre = response.data.pre
    data.commit = response.data.commit
  }).catch((err) => {
    console.log('请求失败', err)
  })
})

let worker_color = (w: any) => {
    if (!w.enable) {
        return '#F56C6C'
    }
    return '#67C23A'
}

let short_id = (long: String) => {
  return long.substring(0, 8)
}

let change = (key: string, _: string[]) => {
  console.log('key', key)
  console.log('active', active.value)
  active.value = key
}
</script>

<style>
@import '@/assets/common.css';

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: white;
  /* background: #d3dce6; */
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  font-size: 16px;
  text-align: center;
  line-height:36px;
  /* color: red; */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
